<project-header class="top-header"></project-header>
  <project-page>
    <!-- Middle section -->
    <div class="middle-section">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-header">
          <div class="container-fluid">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <alerts alerts="alerts"></alerts>
            <div ng-if="!loaded">{{'Loading' | translate}}...</div>
            <h1>
              {{buildConfigName}}
              <div class="pull-right dropdown" ng-if="buildConfig">
                <!-- Primary Actions -->
                <button
                    class="btn btn-default hidden-xs"
                    ng-click="startBuild()"
                    ng-disabled="!canBuild()">
                  {{'StartBuild' | translate}}
                </button>

                <!-- Secondary Actions -->
                <a href="" class="dropdown-toggle resource-actions-dropdown" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                <ul class="dropdown-menu actions action-button">
                  <li class="visible-xs-inline" ng-class="{ disabled: !canBuild() }">
                    <a href=""
                      role="button"
                      ng-attr-aria-disabled="{{canBuild() ? undefined : 'true'}}"
                      ng-class="{ 'disabled-link': !canBuild() }"
                      ng-click="startBuild()"
                    ><i class="fa fa-play fa-fw" aria-hidden="true"></i> Start Build</a>
                  </li>
                  <li>
                    <a ng-href="{{buildConfig | editResourceURL}}" role="button"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> {{'Edit' | translate}}</a>
                  </li>
                  <li>
                    <edit-link
                      resource="buildConfig"
                      kind="buildconfigs"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li>
                    <delete-link
                      resource-type="buildconfig"
                      resource-name="{{buildConfig.metadata.name}}"
                      project-name="{{buildConfig.metadata.namespace}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
              <small class="meta" ng-if="buildConfig"><!--created-->{{'createds'| translate}} <relative-timestamp timestamp="buildConfig.metadata.creationTimestamp"></relative-timestamp></small>
            </h1>
            <labels labels="buildConfig.metadata.labels" clickable="true" kind="builds" title-kind="build configs" project-name="{{buildConfig.metadata.namespace}}" limit="3"></labels>
          </div>
        </div><!-- /middle-header-->
        <div class="middle-content">
          <div class="container-fluid">
            <div class="row" ng-if="loaded">
              <div class="col-md-12" ng-class="{ 'hide-tabs' : !buildConfig }">
                <uib-tabset>
                  <uib-tab>
                    <uib-tab-heading>{{'Summary' | translate}}</uib-tab-heading>

                    <!-- If unfilteredBuilds is undefined, the builds are still loading. -->
                    <div ng-if="!unfilteredBuilds" class="gutter-bottom">Loading...</div>

                    <!-- Show an empty state message when there are no builds. -->
                    <div ng-if="unfilteredBuilds && (unfilteredBuilds | hashSize) === 0" class="empty-state-message text-center">
                      <h2>{{'Nobuilds' | translate}}.</h2>

                      <p>
                        {{'Startanewbuild1' | translate}}
                        <span ng-if="buildConfig.spec.source.type === 'Git'">
                          {{'sourcerepository' | translate}}
                          <span ng-bind-html='buildConfig.spec.source.git.uri | githubLink : buildConfig.spec.source.git.ref : buildConfig.spec.source.contextDir | linky'></span>
                        </span>
                        <span ng-if="buildConfig.spec.source.type !== 'Git'">
                          build configuration {{buildConfig.metadata.name}}.
                        </span>
                      </p>

                      <button class="btn btn-primary btn-lg" ng-click="startBuild(buildConfig.metadata.name)">
                        {{'StartBuild' | translate}}
                      </button>
                    </div>

                    <!-- A filter is hiding all builds (and a message is already displayed above saying that).
                         Show a simple "No builds." message rather than the full empty state message. -->
                    <div ng-if="(unfilteredBuilds | hashSize) > 0 && (builds | hashSize) === 0">
                      No builds.
                    </div>
                    <!-- Show the latest build and a chart of the recent build duration and status. -->
                    <div ng-if="builds && (builds | hashSize) > 0" class="build-config-summary">
                      <!-- Show the latest build status first. -->
                      <div class="h3" style="margin-bottom: 0;">
                        <span class="latest-build-status">
                          <status-icon status="latestBuild.status.phase" style="margin-right: 5px;"></status-icon>
                          {{'Latestbuild' | translate}}
                          <!-- Line break comments to prevent whitespace from being underlined on link hover. -->
                          <a ng-href="{{latestBuild | navigateResourceURL}}"><!--
                            --><span ng-if="latestBuild | annotation : 'buildNumber'">#{{latestBuild | annotation : 'buildNumber'}}</span><!--
                            --><span ng-if="!(latestBuild | annotation : 'buildNumber')">{{latestBuild.metadata.name}}</span><!--
                          --></a>
                          <span ng-switch="latestBuild.status.phase" class="hide-ng-leave">
                            <span ng-switch-when="Complete">{{'complete'| translate}}.</span>
                            <span ng-switch-when="Failed">{{'failed' | translate}}.</span>
                            <span ng-switch-when="Error">{{'encounteredanerror' | translate}}.</span>
                            <span ng-switch-when="Cancelled">{{'wascancelled' | translate}}.</span>
                            <span ng-switch-default>is {{latestBuild.status.phase | lowercase}}.</span>
                          </span>
                        </span>
                        <a ng-href="{{latestBuild | navigateResourceURL}}?tab=logs">{{'ViewLog' |translate}}</a>
                      </div>
                      <div class="latest-build-timestamp meta text-muted">
                        <span ng-if="!latestBuild.status.startTimestamp">
                          created <relative-timestamp timestamp="latestBuild.metadata.creationTimestamp"></relative-timestamp>
                        </span>
                        <span ng-if="latestBuild.status.startTimestamp">
                          started <relative-timestamp timestamp="latestBuild.status.startTimestamp"></relative-timestamp>
                        </span>
                      </div>

                      <build-trends-chart builds="builds"></build-trends-chart>
                    </div>
                    <div ng-if="loaded">
                      <table class="table table-bordered table-hover table-mobile">
                        <thead>
                          <tr>
                            <th>{{'Build' | translate}}</th>
                            <th>{{'Status' | translate}}</th>
                            <th>{{'Created' | translate}}</th>
                          </tr>
                        </thead>
                        <tbody ng-if="(builds | hashSize) == 0">
                          <tr><td colspan="3"><em>{{'buildsemptyMessage' | translate }}</em></td></tr>
                        </tbody>
                        <tbody ng-repeat="build in orderedBuilds">
                          <tr>
                            <td data-title="Build">
                              <!-- Build number and link -->
                              <span ng-if="build | annotation : 'buildNumber'">
                                <a ng-href="{{build | navigateResourceURL}}">#{{build | annotation : 'buildNumber'}}</a>
                              </span>
                              <span ng-if="!(build | annotation : 'buildNumber')">
                                <a ng-href="{{build | navigateResourceURL}}">{{build.metadata.name}}</a>
                              </span>
                              <span ng-if="build.status.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-placement="right" data-trigger="hover" dynamic-content="{{build.status.message}}"></span>
                            </td>
                            <td data-title="Status">
                              <div row class="status">
                                <status-icon status="build.status.phase" disable-animation></status-icon>
                                <span flex>
                                  <span>{{build.status.phase}}</span>
                                  <!-- Build duration -->
                                  <span ng-switch="build.status.phase" class="hide-ng-leave">
                                    <span ng-switch-when="Complete"> in {{(build.status.startTimestamp || build.metadata.creationTimestamp) | duration : build.status.completionTimestamp}}</span>
                                    <span ng-switch-when="Failed">after <span ng-if="!build.status.startTimestamp">waiting </span>{{(build.status.startTimestamp || build.metadata.creationTimestamp) | duration : build.status.completionTimestamp}}</span>
                                    <span ng-switch-when="Cancelled"> after {{(build.status.startTimestamp || build.metadata.creationTimestamp) | duration : build.status.completionTimestamp}}</span>
                                    <span ng-switch-when="Running"> for <duration-until-now timestamp="build.status.startTimestamp"></duration-until-now></span>
                                    <span ng-switch-when="New">, waiting for <duration-until-now timestamp="build.metadata.creationTimestamp"></duration-until-now></span>
                                    <span ng-switch-when="Pending">, waiting for <duration-until-now timestamp="build.metadata.creationTimestamp"></duration-until-now></span>
                                    <span ng-switch-default>
                                      <span ng-if="build.status.startTimestamp"> in {{build.status.startTimestamp | duration : build.status.completionTimestamp}}</span>
                                      <span ng-if="!build.status.startTimestamp"> waited for {{build.metadata.creationTimestamp | duration : build.status.completionTimestamp}}</span>
                                    </span>
                                  </span>
                                </span>
                              </div>
                            </td>
                            <td data-title="Created">
                              <relative-timestamp timestamp="build.metadata.creationTimestamp"></relative-timestamp>
                              <span>- {{build.metadata.creationTimestamp | date : 'short'}}</span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </uib-tab>
                  <uib-tab ng-if="buildConfig">
                    <uib-tab-heading>{{'Configuration' | translate}}</uib-tab-heading>
                      <div class="resource-details">
                        <div class="row">
                          <div class="col-lg-6">
                            <h3>{{'Configuration' | translate}}</h3>
                            <dl class="dl-horizontal left">
                              <div>
                                <dt>{{'Buildstrategy' | translate}}:</dt>
                                <dd>{{buildConfig.spec.strategy.type}}</dd>
                              </div>
                              <div ng-switch="buildConfig.spec.strategy.type">
                                <div ng-switch-when="Source">
                                  <div ng-if="buildConfig.spec.strategy.sourceStrategy.from">
                                    <dt>{{'Builderimage' | translate}}:</dt>
                                    <dd>{{buildConfig.spec.strategy.sourceStrategy.from | imageObjectRef : buildConfig.metadata.namespace}}</dd>
                                  </div>
                                </div>
                                <div ng-switch-when="Docker">
                                  <div ng-if="buildConfig.spec.strategy.dockerStrategy.from">
                                    <dt>Builder image stream:</dt>
                                    <dd>{{buildConfig.spec.strategy.dockerStrategy.from | imageObjectRef : buildConfig.metadata.namespace}}</dd>
                                  </div>
                                  <div ng-if="buildConfig.spec.source.dockerfile">
                                    <dt>Dockerfile:</dt><dd></dd>
                                    <div ui-ace="{
                                      mode: 'dockerfile',
                                      theme: 'eclipse',
                                      onLoad: aceLoaded,
                                      rendererOptions: {
                                        fadeFoldWidgets: true,
                                        showPrintMargin: false
                                      }
                                    }" readonly ng-model="buildConfig.spec.source.dockerfile" class="ace_editor-bordered dockerfile-editor dockerfile-mode"></div>
                                  </div>
                                </div>
                                <div ng-switch-when="Custom">
                                  <div ng-if="buildConfig.spec.strategy.customStrategy.from">
                                    <dt>Builder image stream:</dt>
                                    <dd>{{buildConfig.spec.strategy.customStrategy.from | imageObjectRef : buildConfig.metadata.namespace}}
                                    </dd>
                                  </div>
                                </div>
                              </div>
                              <div ng-if="buildConfig.spec.source">
                                <div ng-if="buildConfig.spec.source.type == 'Git'">
                                  <dt>{{'Sourcerepo' | translate}}:</dt>
                                  <dd ng-bind-html='buildConfig.spec.source.git.uri | githubLink : buildConfig.spec.source.git.ref : buildConfig.spec.source.contextDir | linky'></dd>
                                  <dt ng-if="buildConfig.spec.source.git.ref">Source ref:</dt>
                                  <dd ng-if="buildConfig.spec.source.git.ref">{{buildConfig.spec.source.git.ref}}</dd>
                                  <dt ng-if="buildConfig.spec.source.contextDir">Source context dir:</dt>
                                  <dd ng-if="buildConfig.spec.source.contextDir">{{buildConfig.spec.source.contextDir}}</dd>
                                </div>
                                <div ng-if="buildConfig.spec.source.images" class="image-sources">
                                  <dt>Image sources:</dt>
                                  <dd></dd>
                                  <div ng-repeat="imageSource in imageSources" class="image-source-item">
                                    <h4>{{imageSource.from | imageObjectRef : buildConfig.metadata.namespace}}</h4>
                                    <dl class="dl-horizontal left">
                                      <div class="is-item-description">
                                        <dt>Paths</dt>
                                        <div ng-repeat="(source, destination) in imageSourcesPaths[$index]" class="image-source-paths">
                                          <dd><span class="source-path">{{source}}</span><i class="fa fa-long-arrow-right"></i><span class="destination-dir">{{destination}}</span></dd>
                                        </div>
                                      </div>
                                    </dl>
                                  </div>
                                </div>
                              </div>
                              <div ng-if="buildConfig.spec.output.to">
                                <dt>{{'Outputto' | translate}}:</dt>
                                <dd>{{buildConfig.spec.output.to | imageObjectRef : buildConfig.metadata.namespace}}</dd>
                              </div>
                            </dl>
                          </div>
                          <div class="col-lg-6">
                            <h3>{{'Triggers' | translate}}</h3>
                            <dl class="dl-horizontal left">
                            <div ng-repeat="trigger in buildConfig.spec.triggers">
                              <div ng-switch="trigger.type">
                                <div ng-switch-when="GitHub">
                                    <dt>{{'GitHubwebhookURL' | translate}}:
                                      <a href="{{'webhooks' | helpLink}}" target="_blank"><span class="learn-more-block">{{'Learnmore' | translate}}
                                      <i class="fa fa-external-link"></i></span></a>
                                    </dt>
                                    <dd>
                                      <span click-to-reveal link-text="{{'ShowURL' | translate}}" style="margin-right: 5px;">{{buildConfig.metadata.name | webhookURL : trigger.type : trigger.github.secret : project.metadata.name}}</span>
                                      <copy-to-clipboard-button clipboard-text="buildConfig.metadata.name | webhookURL : trigger.type : trigger.github.secret : project.metadata.name"></copy-to-clipboard-button>
                                    </dd>
                                </div>
                                <div ng-switch-when="Generic">
                                    <dt>{{'GenericwebhookURL' |translate}}:
                                      <a href="{{'webhooks' | helpLink}}" target="_blank"><span class="learn-more-block">{{'Learnmore' | translate}} <i class="fa fa-external-link"></i></span></a>
                                    </dt>
                                    <dd>
                                      <span click-to-reveal link-text="{{'ShowURL' | translate}}" style="margin-right: 5px;">{{buildConfig.metadata.name | webhookURL : trigger.type : trigger.generic.secret : project.metadata.name}}</span>
                                      <copy-to-clipboard-button clipboard-text="buildConfig.metadata.name | webhookURL : trigger.type : trigger.generic.secret : project.metadata.name"></copy-to-clipboard-button>
                                    </dd>
                                </div>
                                <div ng-switch-when="ImageChange">
                                  <dt>
                                    {{'Newimagefor' | translate}}:
                                  </dt>
                                  <dd>
                                    {{(trigger.imageChange.from || (buildConfig | buildStrategy).from) | imageObjectRef : buildConfig.metadata.namespace}}
                                  </dd>
                                </div>
                                <div ng-switch-when="ConfigChange">
                                  <dt>{{'Configchangefor' | translate}}:</dt>
                                  <dd>Build config {{buildConfig.metadata.name}}</dd>
                                </div>
                                <div ng-switch-default>
                                  <dt>Other trigger:</dt>
                                  <dd>{{trigger.type}}</dd>
                                </div>
                              </div>
                            </div>
                            <dt>{{'Manual' | translate}} (CLI):
                              <a href="{{'start-build' | helpLink}}" target="_blank">
                                <span class="learn-more-block">{{'Learnmore' | translate}} <i class="fa fa-external-link"> </i></span>
                              </a>
                            </dt>
                            <dd>
                              <code>oc start-build {{buildConfig.metadata.name}} -n {{project.metadata.name}}</code>
                              <copy-to-clipboard-button clipboard-text="'oc start-build ' + buildConfig.metadata.name + ' -n ' + project.metadata.name"></copy-to-clipboard-button>
                            </dd>
                          </dl>
                        </div>
                      </div>
                      <annotations annotations="buildConfig.metadata.annotations"></annotations>
                    </div>
                  </uib-tab>
                  <uib-tab heading="Environment" active="selectedTab.environment" ng-if="buildConfig">
                    <uib-tab-heading>{{'Environment' | translate}}</uib-tab-heading>
                    <environment env-vars="(buildConfig | buildStrategy).env"></environment>
                    <em ng-if="!(buildConfig | buildStrategy).env">{{'Thebuildstrategy' | translate}}.</em>
                  </uib-tab>
                </uib-tabset>
              </div><!-- /col-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </project-page>
